<template>
	<view>
		<uni-nav-bar @clickLeft="clickLeft()" fixed left-icon="back"
					 :title="detailsShow?'优惠券详情':'领取优惠券'"></uni-nav-bar>

		<view class="ui-row" v-for="(item, index) in list" :key="index" v-if="!detailsShow && list.length != 0" >
			<view class="coupon-item">
				<view class="coupon-money">
					<view class="nick">{{item.name}}</view>
					<view class="layof">￥{{item.faceValue}}</view>
					<view class="end_time">
					{{item.startTime}} - {{item.endTime}}
					</view>
				</view>
				<view class="get-btn"
				      v-if="item.isReceive == 0 "
				      :style="{color:'#fff', borderColor:'#ff6c00', background:'#ff6c00'}"
				      @tap="receiveTo(item)">领取
				</view>
				<view class="get-btn"
				      v-if="item.isReceive == 1 "
				      @tap="detailsTo(item)">查看详情
				</view>
				<!--<view class="icon" v-if="item.isReceive == 1">
					<uni-iconfont class="icon-yilingqu1" size="105" color="#ccc"></uni-iconfont>
				</view>-->
			</view>
		</view>
		<!--<view class="tui-tail" v-if="!detailsShow">
			<text>- 到底了 -</text>
		</view>-->
		<empty v-if="!detailsShow"></empty>

		<view  v-if="detailsShow" style="margin: 40rpx 30rpx">
			<view class="coupon-item">
				<view class="coupon-money">
					<view class="nick">{{itemLi.name}}</view>
					<view class="layof">￥{{itemLi.faceValue}}</view>
					<view class="end_time">{{itemLi.startTime}} - {{itemLi.endTime}}</view>
					<view>
						<view class="tit">券号：{{itemLi.useConditionType}}</view>
						<view class="demand">{{itemLi.exchangeIntegral}}</view>
					</view>
				</view>
				<view class="icon">
					<uni-iconfont style="line-height: 1.8;" class="icon-yilingqu1" size="105" color="#ccc"></uni-iconfont>
				</view>
				<!--<view class="get-btn"
				      @tap="qrcode(item)"
				>立即使用
				</view>-->
			</view>
		</view>

		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>
<script>
    import { mapMutations, mapActions, mapState } from 'vuex'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
    import uniIconfont from '@/components/uni-iconfont/index'
    import empty from '@/components/empty/index.vue'

	export default {
		components: {
            uniLoginModel, uniIconfont, empty
		},
		data() {
			return {
				list: [],
				editForm: {
					phone: null
				},
                itemLi: {
                    couponId: '',
                    endTime: '',
                    exchangeIntegral: '',
                    faceValue: '',
                    isReceive: '',
                    name: '',
                    startTime: '',
                    useConditionType: '',
                    useConditionValue: '',
                },
                detailsShow: false
			}
		},
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            })
        },
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
                uni.showLoading({title: ''})
				this.$api.api('coupon.exList').then(res => {
					if (res.code == 200) {
                        this.list = res.data
                        uni.hideLoading();
					} else {
                        uni.hideLoading();
						uni.showToast({title: res.message, icon: 'none'})
					}
				}).catch(error => {
                    uni.showToast({title: error.message, icon: 'none'})
				})
			},
			//  领取优惠券
            receiveTo(item) {
                this.editForm = {
                    phone: this.userInfo.phone,
                    couponId: item.couponId,
                    useConditionType: item.useConditionType,
                    useConditionValue: item.useConditionValue,
                    status: item.status,
                    faceValue: item.faceValue,
                    endTime: item.endTime,
                    startTime: item.startTime,
                    name: item.name
                }
                this.$api.api('coupon.ex', this.editForm).then(res => {
                    if (res.code == 200 ) {
                        this.getList()
                        uni.showToast({ title: '领取成功', icon: 'none'})
                    } else {
                        uni.showToast({ title: res.message, icon: 'none'})
                    }
                }).catch(error => {
                    uni.showToast({ title: error.message, icon: 'none'})
                })
            },
            detailsTo(item) {
                this.itemLi = item
                this.detailsShow = true
            },
            clickLeft() {
                if (this.detailsShow) {
                    uni.navigateBack({delta: 1})
                } else {
                    this.detailsShow = false
                }
            }
		}
	}
</script>
<style lang="scss" scoped>
	$font-sm:26upx;
	$font-color-999:#999999;
	$bgcolor_white:#ffffff;
	.coupon-item {
		width:100%; height:auto; display:table; border-radius:10upx; padding:0 20upx;border:1px solid #eeeeee; position:relative;background: #fff;
		.coupon-money {
			width:465upx; height:auto; display:table; float:left; padding:26upx 0; border-style:none dotted none none; border-color:#eeeeee;

			.nick { width:100%; height:50upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
			.tit { width:100%; height:50upx; line-height:50upx; font-size:$font-sm; color:$font-color-999; }
			.demand { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
			.layof { width:100%; height:48upx; line-height:30upx; font-size:44upx; color:#ff9000; font-weight:bold; }
			.end_time { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
		}
		.get-btn { width:146upx; height:52upx; line-height:50upx; position:absolute; top:50%; right:26upx; margin-top:-26upx; text-align:center; border-radius:60upx; color:#ff9000; border:1px solid #ff9000; font-size:$font-sm; float:right; }
	}
	.coupon-item:after { width:40upx; height:20upx; position:absolute; left:460upx; top:-1px; border-radius:0 0 40upx 40upx; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-top:0px; }
	.coupon-item:before { width:40upx; height:20upx; position:absolute; left:460upx; bottom:-1px; border-radius:40upx 40upx 0 0; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-bottom:0px; }
	.icon {
		margin-top: 20rpx;
	}
	.ui-row {margin: 40rpx 30rpx;background-color: #ffffff;border-radius: 15rpx;}
</style>